import 'package:cached_network_image/cached_network_image.dart';
import 'package:edu/constants/app_strings.dart';
import 'package:edu/networks/course/models/course_response.dart';
import 'package:edu/pages/course/course_detail/course_detail_page_logic.dart';
import 'package:edu/utils/app_theme.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:tuple/tuple.dart';

class CourseDetailHeader extends StatelessWidget {
  const CourseDetailHeader({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
      color: Theme.of(context).colorScheme.surface,
      child: Selector<CourseDetailPageLogic, CourseDetail>(
        selector: (context, logic) => logic.courseDetail!,
        builder: (context, detail, child) {
          return Row(
            children: [
              _buildThumbnailWidget(context, detail.imageUrl),
              const SizedBox(width: 16),
              _buildTextInfoWidget(context, detail),
            ],
          );
        },
      ),
    );
  }

  Widget _buildTextInfoWidget(BuildContext context, CourseDetail detail) {
    final majorTitleStyle = Theme.of(
      context,
    ).textTheme.titleMedium?.copyWith(fontWeight: FontWeight.bold);
    final minorTitleStyle = Theme.of(
      context,
    ).textTheme.titleSmall?.copyWith(color: Colors.grey[500]);
    return Expanded(
      child: SizedBox(
        height: 115,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  detail.title,
                  style: majorTitleStyle,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
                const SizedBox(height: 4),
                Text(
                  detail.minorTitle,
                  style: minorTitleStyle,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
            const Spacer(),
            _buildFooterTextRow(context, detail),
          ],
        ),
      ),
    );
  }

  Widget _buildFooterTextRow(BuildContext context, CourseDetail detail) {
    final primaryColor = Theme.of(context).colorScheme.primary;
    final priceStyle = Theme.of(context).textTheme.titleMedium?.copyWith(
      color: primaryColor,
      fontWeight: FontWeight.bold,
    );
    final refoundTipColor = AppTheme.shared.commonTipColor;
    return Row(
      children: [
        Text('¥ ${detail.price}', style: priceStyle),
        const SizedBox(width: 16),
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
          decoration: BoxDecoration(
            border: Border.all(color: refoundTipColor, width: 0.5),
            borderRadius: BorderRadius.circular(4),
          ),
          child: Selector<CourseDetailPageLogic, Tuple2<bool, bool>>(
            selector: (context, logic) =>
                Tuple2(logic.isMycourse, logic.isPurchased),
            builder: (context, v, child) {
              String tipString;
              if (v.item1) {
                tipString = AppStrings.myCourse;
              } else if (v.item2) {
                tipString = AppStrings.courseAlreadyPurchased;
              } else {
                tipString = AppStrings.refoundTip;
              }
              return Text(
                tipString,
                style: TextStyle(color: refoundTipColor, fontSize: 10),
              );
            },
          ),
        ),
      ],
    );
  }

  Widget _buildThumbnailWidget(BuildContext context, String imgUrl) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(4),
      child: CachedNetworkImage(
        imageUrl: imgUrl,
        width: 90,
        height: 120,
        errorWidget: (context, url, error) => const Icon(Icons.error),
        fit: BoxFit.cover,
        placeholder: (context, url) =>
            const CupertinoActivityIndicator(radius: 15),
      ),
    );
  }
}
